<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1">
    <title>“我的”页面</title>

    <link rel="stylesheet" href="CSS/mine.css">
    <link rel="stylesheet" href="CSS/reset.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <!-- 首部标签部分  -->
        <div class="top_icon">
            <div class="wifi">
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="74pt" height="74pt" viewBox="0 0 74 74" style="" preserveAspectRatio="xMidYMid meet">
                    <g fill="#757575FF" stroke="#757575FF">
                        <path d="M 22.035 8.250 C 22.055 8.938 22.714 10.625 23.500 12.000 C 25.620 15.708 25.406 16.000 20.565 16.000 C 14.427 16.000 11.339 17.396 9.004 21.225 C 7.243 24.113 7.007 26.271 7.005 39.500 C 7.002 62.070 8.459 63.834 27.191 63.944 C 35.947 63.995 39.448 63.115 37.649 61.316 C 37.346 61.012 32.059 60.525 25.900 60.233 C 17.193 59.821 14.324 59.324 13.001 58.001 C 9.325 54.325 9.367 25.633 13.054 21.946 C 15.414 19.586 28.535 18.541 46.000 19.321 C 58.203 19.867 59.668 20.131 61.250 22.073 C 62.213 23.255 63.000 25.720 63.000 27.552 C 63.000 31.173 64.536 32.864 66.260 31.140 C 67.002 30.398 67.054 28.554 66.423 25.308 C 65.190 18.967 61.024 16.000 53.352 16.000 C 50.408 16.000 48.000 15.611 48.000 15.135 C 48.000 14.659 48.900 13.126 50.000 11.727 C 54.871 5.534 50.620 5.317 45.554 11.500 C 41.949 15.898 41.734 16.000 36.028 16.000 L 30.190 16.000 27.553 11.500 C 25.083 7.286 21.956 5.444 22.035 8.250 "/></g>
                    <g fill="#757575FF" stroke="#757575FF">
                        <path d="M 59.422 39.418 C 54.566 41.533 49.087 46.895 46.436 52.127 C 43.069 58.770 43.213 65.728 46.658 62.869 C 47.396 62.256 48.000 60.892 48.000 59.838 C 48.000 53.888 56.046 44.925 63.233 42.870 C 65.580 42.199 68.058 41.228 68.739 40.712 C 72.245 38.057 64.893 37.036 59.422 39.418 "/></g>
                    <g fill="#757575FF" stroke="#757575FF">
                        <path d="M 65.500 47.781 C 61.807 48.562 56.779 53.246 54.778 57.769 C 53.179 61.383 53.050 62.413 54.113 63.070 C 55.682 64.039 58.000 62.374 58.000 60.278 C 58.000 58.359 64.359 52.000 66.278 52.000 C 67.090 52.000 68.266 51.385 68.890 50.633 C 70.355 48.867 68.348 47.178 65.500 47.781 "/></g>
                    <g fill="#757575FF" stroke="#757575FF">
                        <path d="M 63.667 57.667 C 62.338 58.995 63.044 61.953 64.931 62.963 C 66.388 63.743 67.246 63.611 68.431 62.427 C 70.315 60.543 70.381 59.781 68.800 58.200 C 67.493 56.893 64.728 56.605 63.667 57.667 "/></g>
                </svg>
            </div>
            <div class="scan">
                <svg width="56" height="52" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.6" viewBox="0 0 70 70">
                    <path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.4745098039215686" d="M 6.5 0 L 20 0 L 20 6 L 8 6 L 8 17 L 3 17 L 3 3.5 L 4 1 L 6.5 0 Z " />
                    <path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.4745098039215686" d="M 36 0 L 49.5 0 L 52 1 L 53 3.5 L 53 17 L 48 17 L 48 6 L 36 6 L 36 0 Z " />
                    <path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.4745098039215686" d="M 0 23 L 55.5 23 L 56 23.5 L 56 29 L 0.5 29 L 0 28.5 L 0 23 Z " />
                    <path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.4745098039215686" d="M 3 35 L 8 35 L 8 46 L 18.5 46 Q 21.3 47.4 20 52 L 6.5 52 L 4 51 L 3 48.5 L 3 35 Z " />
                    <path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.4745098039215686" d="M 48 35 L 53 35 L 53 48.5 L 52 51 L 49.5 52 L 36 52 Q 34.8 47.4 37.5 46 L 48 46 L 48 35 Z " />
                    <path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0" d="M 0 0 L 6 0.5 L 4 1 L 3 3.5 L 3 17 L 8 17 L 8 6 L 20 6 L 20 0.5 L 20.5 0 L 36 0 L 36 6 L 48 6 L 48 17 L 53 17 L 53 3.5 L 52 1 L 50 0.5 L 56 0 L 56 23 L 0 23 L 0 0 Z " />
                    <path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0" d="M 0 29 L 56 29 L 56 52 L 50 51.5 L 52 51 L 53 48.5 L 53 35 L 48 35 L 48 46 L 37.5 46 Q 34.8 47.4 36 52 L 20.5 52 Q 19.5 52 20 47.5 L 18.5 46 L 8 46 L 8 35 L 3 35 L 3 48.5 L 4 51 L 6 51.5 L 0 52 L 0 29 Z " />
                </svg>
            </div>
            <div class="cloth">
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="68pt" height="68pt" viewBox="0 0 68 68" style="" preserveAspectRatio="xMidYMid meet">
                    <g fill="#808080" stroke="#808080">
                        <path d="M 10.993 14.750 C 7.602 18.463 4.359 22.479 3.787 23.676 C 1.963 27.490 3.673 30.763 9.520 34.645 L 15.000 38.283 15.000 48.142 C 15.000 62.168 14.771 62.000 33.927 62.000 L 48.855 62.000 50.927 59.365 C 52.698 57.115 53.000 55.327 53.001 47.115 L 53.002 37.500 57.995 34.696 C 66.989 29.644 67.113 26.672 58.750 16.590 C 50.681 6.862 49.304 6.474 43.612 12.331 C 36.374 19.779 29.532 19.497 23.433 11.501 C 21.964 9.575 19.952 8.000 18.961 8.000 C 17.970 8.000 14.385 11.038 10.993 14.750 M 21.886 13.060 C 28.676 22.243 38.964 22.084 46.520 12.679 L 49.074 9.500 55.516 16.500 C 59.059 20.350 62.217 24.271 62.534 25.212 C 63.394 27.765 61.612 30.230 57.065 32.780 L 53.000 35.060 53.000 31.030 C 53.000 28.813 52.550 27.000 52.000 27.000 C 51.379 27.000 51.000 32.500 51.000 41.500 C 51.000 60.712 51.671 60.000 33.571 60.000 C 22.697 60.000 19.844 59.701 18.571 58.429 C 17.283 57.140 17.000 54.167 17.000 41.929 C 17.000 32.643 16.622 27.000 16.000 27.000 C 15.450 27.000 15.000 28.812 15.000 31.026 L 15.000 35.051 11.947 33.472 C 8.046 31.456 5.000 28.412 5.000 26.532 C 5.000 24.995 17.590 10.000 18.881 10.000 C 19.290 10.000 20.642 11.377 21.886 13.060 "/></g>
                </svg>
            </div>
            <img src="bili_icon/bili_moon.jpg" alt="">
        </div>

        <!-- 用户信息部分 -->
        <div class="user" onclick="location.href='personal_page.html'">
            <div class="left">
                <div class="avatar">
                    <img src="img/avatar.jpg" alt="">
                </div>

                <div class="information">
                    <div class="name">
                        <p>用户名</p>
                        <img id="write" src="bili_icon/bili_write.jpg" alt="">
                        <img id="level" src="bili_icon/bili_level.png" alt="">
                    </div>
                    <div class="huiyuan">
                        <p>正式会员</p>
                    </div>
                    <div class="data">
                        <p>B币：0.0 &emsp;硬币：943</p>
                    </div>
                </div>
            </div>

            <div class="right">
                <p>空间</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                    <path fill="#C0C0C0" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                </svg>
            </div>
        </div>

        <!-- 用户数据部分 -->
        <div class="data">
            <div class="dynamic">
                <div class="count">2</div>
                <p>动态</p>
            </div>

            <div class="v-line"></div>

            <div class="attention">
                <div class="count">220</div>
                <p>关注</p>
            </div>

            <div class="v-line"></div>

            <div class="fans">
                <div class="count">6</div>
                <p>粉丝</p>
            </div>
        </div>

        <!-- 大会员部分 -->
        <div class="dahuiyuan">
            <div class="left">
                <div class="big">
                    <img src="bili_icon/bili_big.png" alt="">
                </div>
                <div class="content">
                    <div class="line1">悄悄成为大会员</div>
                    <div class="line2">
                        然后惊艳所有人
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                            <path fill="#FD6498" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                        </svg>
                    </div>
                </div>

                <div class="right">
                    <p>立即开通</p>
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="#FD6498" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                    </svg>
                </div>
            </div>

            <div class="right">

            </div>
        </div>
    </div>

    <!-- 功能部分  -->
    <div class="function">
        <div class="save">
            <img src="bili_icon/bili_download.svg" alt="">
            离线缓存
        </div>
        <div class="history">
            <img src="bili_icon/bili_history.svg" alt="">
            历史记录
        </div>
        <div class="collection">
            <img src="bili_icon/bili_collection_blue.jpg" alt="">
            我的收藏
        </div>
        <div class="later">
            <img src="bili_icon/bili_later_blue.jpg" alt="">
            稍后再看
        </div>
    </div>

    <!-- 发视频部分  -->
    <div class="upload">
        <div class="left">
            <div class="line1">
                <div class="up">UP</div>
                <p>发布你的第一个视频</p>
            </div>
            <div class="line2">领限定头像挂件，赢活动奖金</div>
        </div>

        <div class="right">
            <img src="bili_icon/bili_upload.png" alt="">
            有奖发布
        </div>
    </div>

    <!-- 服务列表  -->
    <div class="server">
        <p>更多服务</p>

        <ul class="server_list">
            <li>
                <div class="left">
                    <img src="bili_icon/bili_kefu_pink.jpg" alt="">
                    <p>联系客服</p>
                </div>
                <div class="right">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="#999999" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                    </svg>
                </div>
            </li>

            <li>
                <div class="left">
                    <img src="bili_icon/bili_listen_pink.jpg" alt="">
                    <p>听视频</p>
                </div>
                <div class="right">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="#999999" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                    </svg>
                </div>
            </li>

            <li>
                <div class="left">
                    <img src="bili_icon/bili_protect.jpg" alt="">
                    <p>青少年守护</p>
                </div>
                <div class="right">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="#999999" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                    </svg>
                </div>
            </li>

            <li>
                <div class="left">
                    <img src="bili_icon/bili_set.png" alt="">
                    <p>设置</p>
                </div>
                <div class="right">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="#999999" d="M9.293 18.707a1 1 0 0 1 0-1.414L14.586 12L9.293 6.707a1 1 0 0 1 1.414-1.414l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0"/>
                    </svg>
                </div>
            </li>
        </ul>
    </div>

    <!-- 底部部分 -->
    <ul class="footer">
        <li class="home" onclick="location.href='main.html'">
            <img src="bili_icon/bili_home_unselected.jpg" alt="">
            <p>首页</p>
        </li>

        <li class="dynamic">
            <img src="bili_icon/bili_dynamic.jpg" alt="">
            <p>动态</p>
        </li>

        <li class="add">
            <p>+</p>
        </li>

        <li class="shopping">
            <img src="bili_icon/bili_shopping.jpg" alt="">
            <p>会员购</p>
        </li>

        <li class="mine" onclick="location.href='mine.html'">
            <img src="bili_icon/bili_mine_selected.jpg" alt="">
            <p>我的</p>
        </li>
    </ul>
</div>
</body>
</html>